<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>双向数据绑定</title>
	<style type="text/css">
		
	#app {
		width: 500px;
		height: 500px;
		margin: 10px auto;
		background: pink;	
	}
	input {
		width: 60%;
		height: 30px;
		margin: 20px 20%;
	}
	
	</style>
</head>
<body>
<div id="app">
	<input type="text" value="">
	<h1 id="in"></h1>
</div>
</body>
<script type="text/javascript">
	
let input = document.getElementsByTagName('input')[0];
let p = document.getElementById('in');

let data ={
	msg: 'ok'
}

data = new Proxy(data, {
	get(target, key, receiver) {
		console.log('get');
	},
	set(target, key, val, old) {
		p.innerText = val;
		return target[key] = val;
	}
})

input.addEventListener('keyup', function(e) {
	let ina = input.value;
	data.msg = ina;
})

</script>
</html>